第二週 - Flexbox 網頁排版術

Posted on | In

flex宇宙會有「外容器」container 及「內元件」items，以及軸線概念、對齊方法概念

Flex 外層屬性 (container)

  • 實現Flex排版或內元件要有效果的關鍵：外容器加上display: flex \ display: inline-flex
  • 每個 HTML 標籤，能同時擁有內元件跟外容器身份
  • 如果沒有做特定的設定，內部元件會依據外容器去做比例上的調整
  • 每一個item預設相等高度

軸線 Axes

分成「主軸」main axis、「交錯軸」cross axis

https://developer.mozilla.org/files/3739/flex_terms.png

MDN

主軸線 - 排排站依據 / 資訊動線的流向

— flex-flow 是 flex-direction及flex-wrap的縮寫屬性

flex-direction - 決定主軸的方向 / 主軸方向決定Item排列方式和結果

  • row (default) | row-reverse | column | column-reverse

flex-wrap - 換行屬性，決定items 是否維持同一行

  • Default value is 「nowrap」, items 自適應父容器於同一行
  • flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
1
2
3
4
5
6
7
8
9
10
11
12
// 有六個子元素(每一個寬度一樣)，而外容器假定寬應該只等於3個子元素
// 設定display: flex 、及flex-wrap 呈現如下
nowrap
A B C D E F

wrap: 
A B C
D E F

wrap-reverse:
D E F
A B C
  • The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.
  • align-content 搭配 wrap、align-items 搭配 nowrap

justify-content - items 在主軸線上排排站、對齊的方式

  • flex-start (default) | flex-end | center | space-between | space-around | space-evenly | initial | inherit;

  • space-between (平均分配，首尾items分別貼齊左右邊)

  • space-around ( items 間間距是左右兩邊兩倍)

  • space-evenly (間距一樣、IE11 不支援)

  • 範例

    Apple - justify-content

    https://taiwancanhelp.us/

交錯軸

永遠的都會跟主軸去做垂直交錯

align-items - 交錯軸的對齊方式

  • flex-start | center | flex-end | stretch (default) | baseline
  • align-self 屬性定義目前單一彈性項目如何對齊。這個設定會覆蓋 align-items 的預設值。
  • 在container 有設定高度的前提下，內元素以當前的交錯軸去決定如何對齊

align-content - set how multiple lines are spaced apart from each other

  • flex-start | center | flex-end | stretch (default) | space-between | space-around
  • 在container 有設定高度的前提下，多行的內元素在外容器內，藉有彼此決定要怎麼排列
  • 在只有單行下，書寫align-content是沒有用

進階屬性

Flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined

flex: flex-grow flex-shrink flex-basis;

flex-grow

  • 預設為 0
  • 用在當外容器還有剩餘空間時，內元素如何分配剩餘空間

flex-shrink

  • 預設為 1
  • 當單行內元素超過外容器時，items要如何縮小
  • 文章一開頭時Key說: 如果沒有做特定的設定，內部元件會依據外容器去做比例上的調整

flex-basis

  • flex-basis 預設值爲 auto
  • defines the default size of an element before the remaining space is distributed.
  • 當flex-direction: row, 決定寬度
  • 當flex-direction: row, 決定高度

order

  • order 則是針對子元素去設定它的排列順序

其他